<script lang="ts" setup>
import { useActivated } from '@/hooks/useActivated'
// import cabinetImg from '@/assets/map/cabinetLocation/cabinet.png'
import { ref, reactive, onMounted, watch, onActivated } from 'vue'
import { queryBoxLocations } from '@/api/cabinet'
import { getToken } from '@/utils/cache/cookies'
import { OnlineStatus } from '@/types/enum'
import { OptionsType } from '@/types/interface'
import { useRoute } from 'vue-router'
const mainType = ref<'0' | '1' | '2' | '3' | '4' | '5'>('0')
const secondType = ref<string>('0')
const secondFilters = ref<OptionsType[]>([])
const minPowerLevel = ref<number>(0)
const maxPowerLevel = ref<number>(0)
const onlineStatus = ref<OnlineStatus>(OnlineStatus.OnLine)
const datedTime = ref<string>('')
const route = useRoute()
const watchParams = reactive({
  storeId: route.query.storeId as string
})
const powerType = reactive<OptionsType[]>([
  {
    label: '0%',
    value: '0-0'
  },
  {
    label: '1-10%',
    value: '1-10'
  },
  {
    label: '1-20%',
    value: '1-20'
  },
  {
    label: '1-30%',
    value: '1-30'
  },
  {
    label: '1-40%',
    value: '1-40'
  },
  {
    label: '0-40%',
    value: '0-40'
  },
  {
    label: '11-20%',
    value: '11-20'
  },
  {
    label: '21-30%',
    value: '21-30'
  },
  {
    label: '31-40%',
    value: '31-40'
  },
  {
    label: '41-50%',
    value: '41-50'
  },
  {
    label: '51-60%',
    value: '51-60'
  },
  {
    label: '61-100%',
    value: '61-100'
  }
])
const connectType = reactive<OptionsType[]>([
  {
    label: '联网',
    value: '1'
  },
  {
    label: '断网',
    value: '0'
  }
])
const sedimentType = reactive<OptionsType[]>([
  {
    label: '超12小时未用',
    value: '12'
  },
  {
    label: '超24小时未用',
    value: '24'
  },
  {
    label: '超36小时未用',
    value: '36'
  },
  {
    label: '超48小时未用',
    value: '48'
  },
  {
    label: '超72小时未用',
    value: '72'
  }
])
const emits = defineEmits(['get', 'reset'])

const getData = async () => {
  try {
    const res = await queryBoxLocations({
      token: getToken() ?? '',
      minPowerLevel: minPowerLevel.value,
      maxPowerLevel: maxPowerLevel.value,
      onlineStatus: onlineStatus.value,
      datedTime: datedTime.value,
      type: mainType.value,
      storeId: watchParams.storeId
    })
    if (res.statusCode === '0') {
      emits('get', res.data)
    } else {
      emits('reset')
    }
  } catch (error) {
    console.error(error)
  }
}
const handleChange = () => {
  switch (mainType.value) {
    case '0':
      secondFilters.value = connectType
      secondType.value = '0'
      break
    case '1':
      secondFilters.value = powerType
      secondType.value = '21-30'
      getData()
      break
    case '2':
      secondFilters.value = powerType
      secondType.value = '21-30'
      getData()
      break
    case '3':
      secondFilters.value = powerType
      secondType.value = '21-30'
      getData()
      break
    case '4':
      secondFilters.value = []
      secondType.value = ''
      break
    case '5':
      secondFilters.value = sedimentType
      secondType.value = '12'
      break
    default:
      break
  }
}
onMounted(() => {
  secondFilters.value = connectType
})
watch(
  secondType,
  () => {
    minPowerLevel.value = 0
    maxPowerLevel.value = 0
    onlineStatus.value = OnlineStatus.OnLine
    datedTime.value = ''
    if (mainType.value === '1' || mainType.value === '2' || mainType.value === '3') {
      minPowerLevel.value = Number(secondType.value.split('-')[0])
      maxPowerLevel.value = Number(secondType.value.split('-')[0])
    } else if (mainType.value === '0') {
      onlineStatus.value = secondType.value as OnlineStatus
    } else if (mainType.value === '5') {
      datedTime.value = secondType.value
    }
    getData()
  },
  {
    immediate: true
  }
)

/** 处理是否缓存 */
useActivated(
  watchParams,
  { watchParams },
  [{ key: 'storeId', path: 'watchParams.storeId' }],
  getData,
  []
)
onActivated(() => {
  watchParams.storeId = route.query.storeId as string
})
</script>

<template>
  <div class="cabinet-map-type-filter">
    <img src="/button/cabinet.png" alt="" />
    <el-select v-model="mainType" class="main-filter" @change="handleChange">
      <el-option value="0" label="全部电柜" />
      <el-option value="1" label="含48V电池" />
      <el-option value="2" label="含60V电池" />
      <el-option value="3" label="1号仓" />
      <el-option value="4" label="维修仓" />
      <el-option value="5" label="沉淀仓" />
    </el-select>
    <el-select v-model="secondType" class="second-filter">
      <el-option
        v-for="(item, index) in secondFilters"
        :label="item.label"
        :value="item.value"
        :key="index"
      />
    </el-select>
  </div>
</template>

<style scoped lang="scss">
.cabinet-map-type-filter {
  background: #ffffff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  z-index: 999;
  position: absolute;
  right: 30px;
  top: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px;
  :deep(.el-select) {
    width: 126px;
    .el-select__wrapper {
      box-shadow: 0 0 0 0px var(--el-border-color) inset;
    }
  }
}
</style>
